<template>
	<view>
		<view class="megBox" v-for="(item) in 8">
			<view class="msgLeft">
				<!-- 头像 -->
				<view class="head">
					<image src="../../static/logo.jpg" mode=""></image>
				</view>
			</view>
			<view class="msgRight">
				<view class="title">
					<view class="name">
						金融-1986
					</view>
					<view class="time">
						女 1986年
					</view>
				</view>
				<view class="content">
					硕士&nbsp;&nbsp;|&nbsp;&nbsp;北京-朝阳区
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style>
	.megBox{
		height: 202rpx;
		overflow: hidden;
	}
	.megBox .msgLeft{
		height: 202rpx;
		float: left;
		overflow: hidden;
		position: relative;
	}
	.megBox .msgLeft image{
		width: 108rpx;
		height: 108rpx;
		margin: 26rpx;
		border-radius: 15rpx;
	}
	.megBox .msgLeft .dot{
		width: 36rpx;
		height: 36rpx;
		background-color: #f60300;
		border-radius: 50%;
		color: #fff;
		text-align: center;
		font-size: 20rpx;
		line-height: 36rpx;
		position: absolute;
		top: 16rpx;
		right: 10rpx;
	}
	.megBox .msgRight{
		margin-left: 160rpx;
		border-bottom: 3rpx solid #ededed;
	}
	.megBox .msgRight .title{
		overflow: hidden;
	}
	.megBox .msgRight .name{
		font-size: 32rpx;
		line-height: 96rpx;
		font-weight: bold;
		float: left;
	}
	.megBox .msgRight .time{
		font-size: 24rpx;
		line-height: 96rpx;
		margin-right: 36rpx;
		color: #b0b0b0;
		float: right;
	}
	.megBox .msgRight .content{
		font-size: 26rpx;
		line-height: 28rpx;
		margin-bottom: 78rpx;
		color: #6d6d6d;
	}
</style>
